<template>
  <div class="download">
    <div class="content" v-if="$i18n.locale === 'zh'">
      <div class="logo">
        <img src="~/assets/img/en_logo@2x.png" alt="" />
      </div>
      <div class="title">
        <img src="~/assets/img/zh_title@2x.png" alt="" />
      </div>
      <div class="btn" @click="download">
        <img src="~/assets/img/zh_btn@2x.png" alt="" />
      </div>
      <div class="image">
        <img src="~/assets/img/img_cn@2x.png" alt="" />
      </div>
      <NuxtLink :to="$i18n.path('m')">
        <div class="to-index">进入网页</div>
      </NuxtLink>
    </div>
    <div class="content" v-if="$i18n.locale === 'km'">
      <div class="logo">
        <img src="~/assets/img/en_logo@2x.png" alt="" />
      </div>
      <div class="title">
        <img src="~/assets/img/km_title@2x.png" alt="" />
      </div>
      <div class="btn" @click="download">
        <img src="~/assets/img/km_btn@2x.png" alt="" />
      </div>
      <div class="image">
        <img src="~/assets/img/img_kh@2x.png" alt="" />
      </div>
      <NuxtLink :to="$i18n.path('m')">
        <div class="to-index">ចូលទំព័រដើម</div>
      </NuxtLink>
    </div>
    <div class="bg" v-if="isAndroid && isWeixin">
      <div class="tips" v-html="$t('wechat_Open_in_Browser')"></div>
    </div>
    <div class="Twitter-bg" v-if="isAndroid && isTwitter">
      <div class="tips">{{ $t('Twitter_Open_in_Browser') }}</div>
    </div>
  </div>
</template>

<script>
import { Collect } from '@/utils/collect';
export default {
  data() {
    return {
      isAndroid: false,
      isTwitter: false,
      isiOS: false,
      isWeixin: false,
      img_list: [
        'https://apk.tnaot.com/apk/logo.png',
        'https://apk1.tnaot.com/apk/logo.png'
      ], //图片组
      androd_download: '', //安卓下载1,
      androd1_download: '', //安卓下载,
      download_choise: 0 // 下载选择 1, 选择androd_download， 2 选择 androd1_download
    };
  },
  head() {
    /* 动态配置title,meta，便于facebook爬虫 */
    return {
      title: this.$t('tnaot_title'),
      meta: [
        {
          property: 'og:image',
          content: 'https://m.tnaot.com/img/logo-256.png'
        },
        { property: 'og:title', content: this.$t('tnaot_title') },
        { name: 'keywords', content: this.$t('indexKeywords') },
        { name: 'description', content: this.$t('indexDescription') }
      ]
    };
  },
  /* 服务端异步请求数据 */
  async asyncData(ctx) {
    try {
      const result = await ctx.$axios.$get(`/download/app/android`);
      return {
        androd_download: result
      };
    } catch (err) {
      ctx.error({ statusCode: 404, message: '网络异常，请重试！' });
    }
  },
  created() {
    this.androd1_download =
      'https://apk1.tnaot.com' + this.androd_download.slice(20);
  },
  mounted() {
    this.addPromise(this.img_list[0])
      .then(res => {
        if (this.download_choise == 0) {
          this.download_choise = 1;
        } else {
          console.log('apk差一点');
          return;
        }
      })
      .catch(err => {
        console.log(err);
      }); //下载路径一判断
    this.addPromise(this.img_list[1])
      .then(res => {
        if (this.download_choise == 0) {
          this.download_choise = 2;
        } else {
          console.log('apk1差一点');
          return;
        }
      })
      .catch(err => {
        console.log(err);
      }); //下载路径二判断
    var u = navigator.userAgent;
    this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    this.isTwitter = u.indexOf('Twitter') > -1;
    var WxObj = window.navigator.userAgent.toLowerCase();
    this.isWeixin = WxObj.match(/microMessenger/i) == 'micromessenger';
    this.collect();
    console.log('是否微信', this.isWeixin);
  },
  methods: {
    async download() {
      if (this.isAndroid) {
        this.openUrlIframe(
          jump_url,
          'https://play.google.com/store/apps/details?id=com.tnaot.newspro'
        );
      } else if (this.isiOS) {
        window.location.href =
          'https://itunes.apple.com/us/app/tnaot/id1296073079';
      } else {
        window.location.href =
          this.download_choise != 2
            ? this.androd_download
            : this.androd1_download;
      }

      //埋点
      if ($nuxt.$route.query.flag) {
        Collect(
          1,
          '渠道下载页/download',
          'flag=' + $nuxt.$route.query.flag,
          this.$i18n.locale === 'zh' ? 1 : 2
        );
      } else {
        Collect(
          1,
          'H5下载页/download',
          'channel=',
          this.$i18n.locale === 'zh' ? 1 : 2
        );
      }
    },
    //埋点
    async collect() {
      if ($nuxt.$route.query.flag) {
        Collect(
          8,
          '渠道下载页',
          'flag=' + $nuxt.$route.query.flag,
          this.$i18n.locale === 'zh' ? 1 : 2
        );
      } else {
        Collect(8, 'H5下载页', 'channel=', this.$i18n.locale === 'zh' ? 1 : 2);
      }
    },
    addPromise(url) {
      return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => {
          console.log('img load completed!');
          resolve('success');
        };
        img.onerror = reject;
        img.src = url;
      });
    },
    //通过iframe 打开Scheme 内置定时器
    openUrlIframe(jump_url, down_url) {
      if (process.client) {
        var iframe = document.createElement('iframe');
        var body = document.body;
        iframe.style.cssText = 'display:none;width=0;height=0';
        var timer = null;

        body.appendChild(iframe);
        iframe.src = jump_url;
        timer = setTimeout(function() {
          window.location.href = down_url;
        }, 500);

        /*隐藏下载不要在弹出来*/
        document.addEventListener('visibilitychange', function() {
          var tag = document.hidden || document.webkitHidden;
          if (tag) {
            clearTimeout(timer);
          }
        });
        document.addEventListener('webkitvisibilitychange', function() {
          var tag = document.hidden || document.webkitHidden;
          if (tag) {
            clearTimeout(timer);
          }
        });
        document.querySelector('body').addEventListener('pagehide', function() {
          clearTimeout(timer);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.download {
  html {
    font-size: 50px;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
  }
  .content {
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: #fff;
  }

  img {
    width: 100%;
  }

  .logo {
    width: 220px;
    height: 52px;
    margin: 0 auto 0;
  }

  .title {
    width: 692px;
    height: 68px;
    margin: 32px auto 0;
  }

  .btn {
    width: 318px;
    height: 88px;
    margin: 32px auto 0;
  }

  .image {
    width: 538px;
    height: 538px;
    margin: 62px auto 0;
  }
  .bg,
  .Twitter-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99;
    // display: none;
  }
  .Twitter-bg .tips {
    font-size: 44px;
    color: #fff;
    font-weight: bolder;
    text-align: center;
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
  }
  .bg .tips {
    font-size: 36px;
    height: 120px;
    color: #fff;
    font-weight: bolder;
    padding-top: 100px;
    text-align: center;
    padding-left: 30px;
    background: url('~assets/img/alert-arrow.png') no-repeat 90% 10%;
    background-size: 58px 72px;
  }
  .to-index {
    font-size: 24px;
    text-align: center;
    margin: 20px auto 0;
    color: rgba(12, 12, 28, 1);
    height: 48px;
    line-height: 48px;
    border-radius: 28px;
    border: 2px solid rgba(12, 12, 28, 0.2);
    width: 144px;
    padding: 0 24px;
  }
}
</style>
